<template>
  <div class="playlist">
    <playlistinfo :playlist="playlist" />
    <playlist :list="list" />
  </div>
</template>

<script>
import { recommendMusic, getSongListAll } from '@/api'
import playlist from '@/components/playlist'
import playlistinfo from '@/components/playlistinfo'
export default {
  name: 'Playlist',
  components: {
    playlist,
    playlistinfo
  },
  data() {
    return {
      id: this.$route.params.id,
      list: [], // 歌曲详情列表
      playlist: {},
      title: '',
      description: '',
      limit: 50,
      like: true
    }
  },
  async created() {
    this.recommendMusic()
    this.getSongListAll()
  },
  methods: {
    async recommendMusic() {
      const res = await recommendMusic({ id: this.id, cookie: this.$store.state.cookie })
      this.list = res.data.playlist.tracks

      this.playlist = res.data.playlist
      console.log(this.playlist.creator.userId)

      console.log(res.data.playlist.tracks)
      console.log(this.list)
      console.log(res)
    },
    async getSongListAll() {
      const res = await getSongListAll({ id: this.id, limit: this.limit })
      console.log(res)
    }
  }
}
</script>

<style lang='less' scoped>

.playlist{
    margin-top:32px ;
    .el-dialog{
      border-radius: 12px;
    }
}
</style>
